<template>
  <div class="stool-meeting-container">
    <!-- 左侧：议事会动态 -->
    <div class="left-content">
      <!-- 本月议事会概览 -->
      <div class="stat-card">
        <div class="card-title">本月议事会概览</div>
        <div class="overview-stats">
          <div class="meeting-count">
            <div class="count-value">3次</div>
            <div class="count-label">召开次数</div>
            <div class="trend up">↑ 20%</div>
          </div>
          <div class="participant-stats">
            <div class="participant-item">
              <div class="participant-label">老党员</div>
              <div class="participant-value">15人</div>
            </div>
            <div class="participant-item">
              <div class="participant-label">业委会</div>
              <div class="participant-value">8人</div>
            </div>
            <div class="participant-item">
              <div class="participant-label">志愿者</div>
              <div class="participant-value">12人</div>
            </div>
          </div>
          <div class="topic-distribution">
            <div class="topic-item">
              <div class="topic-label">小区停车管理</div>
              <div class="topic-value">45%</div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 45%; background: #00c6ff;"></div>
              </div>
            </div>
            <div class="topic-item">
              <div class="topic-label">楼道杂物清理</div>
              <div class="topic-value">30%</div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 30%; background: #52c41a;"></div>
              </div>
            </div>
            <div class="topic-item">
              <div class="topic-label">邻里纠纷调解</div>
              <div class="topic-value">25%</div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 25%; background: #faad14;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 最新议事会记录 -->
      <div class="stat-card">
        <div class="card-title">最新议事会记录</div>
        <div class="meeting-records">
          <div class="record-item" v-for="(record, index) in meetingRecords" :key="index">
            <div class="record-header">
              <div class="record-date">{{ record.date }}</div>
              <div class="record-location">{{ record.location }}</div>
            </div>
            <div class="record-content">
              <div class="record-hosts">
                <span class="host">主持人：{{ record.hosts.join('、') }}</span>
              </div>
              <div class="record-topics">
                <div class="topic-tag" v-for="(topic, tIndex) in record.topics" :key="tIndex">
                  {{ topic }}
                </div>
              </div>
            </div>
            <div class="record-footer">
              <button class="view-details-btn">查看详情</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间：问题处理跟踪 -->
    <div class="center-content">
      <!-- 问题上报与解决进度 -->
      <div class="stat-card">
        <div class="card-title">问题处理跟踪</div>
        <div class="problem-tracking">
          <div id="problemGanttChart" ref="problemGanttChart"></div>
        </div>
      </div>

      <!-- 当前待处理问题 -->
      <div class="stat-card">
        <div class="card-title">当前待处理问题</div>
        <div class="pending-problems">
          <div class="problem-list">
            <div class="problem-item" v-for="(problem, index) in pendingProblems" :key="index">
              <div class="problem-id">#{{ problem.id }}</div>
              <div class="problem-type">{{ problem.type }}</div>
              <div class="problem-reporter">{{ problem.reporter }}</div>
              <div class="problem-priority" :class="problem.priority">
                {{ problem.priorityText }}
              </div>
              <div class="problem-actions">
                <button class="action-btn view">查看</button>
                <button class="action-btn handle">处理</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧：法治宣传与成效 -->
    <div class="right-content">
      <!-- 本月普法宣传重点 -->
      <div class="stat-card">
        <div class="card-title">本月普法宣传重点</div>
        <div class="law-promotion">
          <div class="promotion-slider">
            <div class="promotion-item" v-for="(item, index) in promotionItems" :key="index">
              <div class="promotion-title">{{ item.title }}</div>
              <div class="promotion-content">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 居民法律咨询统计 -->
      <div class="stat-card">
        <div class="card-title">居民法律咨询统计</div>
        <div class="consultation-chart" ref="consultationChart"></div>
      </div>

      <!-- 议事会成果展示 -->
      <div class="stat-card">
        <div class="card-title">议事会成果展示</div>
        <div class="achievement-chart" ref="achievementChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  name: 'StoolMeeting',
  data() {
    return {
      meetingRecords: [
        {
          date: '06-05',
          location: '金泉小区3号楼前',
          hosts: ['网格警长张', '网格长李', '老党员王'],
          topics: ['小区停车管理', '楼道杂物清理', '垃圾分类'],
          participants: 25,
          status: '已完成'
        },
        {
          date: '06-12',
          location: '金泉小区活动中心',
          hosts: ['网格警长王', '网格长赵', '业委会主任刘'],
          topics: ['邻里纠纷调解', '垃圾分类', '消防安全'],
          participants: 18,
          status: '进行中'
        },
        {
          date: '06-19',
          location: '金泉小区5号楼前',
          hosts: ['网格警长李', '网格长孙', '志愿者队长陈'],
          topics: ['小区绿化改造', '公共设施维护', '文明养犬'],
          participants: 22,
          status: '已完成'
        }
      ],
      pendingProblems: [
        {
          id: '202406-015',
          type: '垃圾堆放',
          reporter: '王*',
          priority: 'high',
          priorityText: '高',
          description: '3号楼前垃圾堆放问题严重，影响居民出行',
          reportTime: '2024-06-15 09:30'
        },
        {
          id: '202406-016',
          type: '噪音投诉',
          reporter: '李*',
          priority: 'medium',
          priorityText: '中',
          description: '5号楼装修噪音扰民',
          reportTime: '2024-06-16 14:20'
        },
        {
          id: '202406-017',
          type: '停车纠纷',
          reporter: '张*',
          priority: 'high',
          priorityText: '高',
          description: '地下车库停车位占用纠纷',
          reportTime: '2024-06-17 10:15'
        },
        {
          id: '202406-018',
          type: '公共设施',
          reporter: '刘*',
          priority: 'medium',
          priorityText: '中',
          description: '小区健身器材损坏需要维修',
          reportTime: '2024-06-18 08:45'
        },
        {
          id: '202406-019',
          type: '绿化问题',
          reporter: '陈*',
          priority: 'low',
          priorityText: '低',
          description: '小区绿化带杂草丛生',
          reportTime: '2024-06-19 11:20'
        },
        {
          id: '202406-020',
          type: '楼道照明',
          reporter: '赵*',
          priority: 'medium',
          priorityText: '中',
          description: '2号楼楼道照明灯损坏',
          reportTime: '2024-06-20 09:30'
        },
        {
          id: '202406-021',
          type: '宠物管理',
          reporter: '孙*',
          priority: 'high',
          priorityText: '高',
          description: '小区内不文明养犬现象',
          reportTime: '2024-06-21 15:40'
        },
        {
          id: '202406-022',
          type: '电梯故障',
          reporter: '周*',
          priority: 'high',
          priorityText: '高',
          description: '4号楼电梯运行异常',
          reportTime: '2024-06-22 10:15'
        }
      ],
      promotionItems: [
        {
          title: '《民法典》楼道杂物法律责任',
          content: '详细解读楼道杂物堆放的法律责任和处罚措施，提醒居民注意消防安全。',
          date: '2024-06-10',
          views: 156
        },
        {
          title: '反诈案例：冒充物业收费诈骗',
          content: '近期高发的冒充物业收费诈骗案例解析，提醒居民提高警惕。',
          date: '2024-06-15',
          views: 203
        },
        {
          title: '消防安全法规图解',
          content: '通过图文形式展示消防安全法规要点，提高居民安全意识。',
          date: '2024-06-18',
          views: 178
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initProblemGanttChart()
      this.initConsultationChart()
      this.initAchievementChart()
    })
  },
  methods: {
    initProblemGanttChart() {
      const chartDom = this.$refs.problemGanttChart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['停车纠纷', '噪音投诉', '公共设施维修'],
          textStyle: {
            color: 'rgba(255, 255, 255, 0.7)'
          },
          top: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['问题1', '问题2', '问题3'],
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.7)'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.7)',
            formatter: function(value) {
              return value + '天'
            }
          }
        },
        series: [
          {
            name: '停车纠纷',
            type: 'bar',
            stack: 'total',
            barWidth: 20,
            data: [3, 3, 3],
            itemStyle: {
              color: '#00c6ff',
              borderRadius: [4, 4, 0, 0]
            }
          },
          {
            name: '噪音投诉',
            type: 'bar',
            stack: 'total',
            barWidth: 20,
            data: [4, 4, 3],
            itemStyle: {
              color: '#52c41a',
              borderRadius: [4, 4, 0, 0]
            }
          },
          {
            name: '公共设施维修',
            type: 'bar',
            stack: 'total',
            barWidth: 20,
            data: [4, 4, 3],
            itemStyle: {
              color: '#faad14',
              borderRadius: [4, 4, 0, 0]
            }
          }
        ]
      }
      myChart.setOption(option)

      // 监听窗口大小变化，重新调整图表大小
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    initConsultationChart() {
      const chartDom = this.$refs.consultationChart
      if (!chartDom) {
        console.error('consultationChart DOM not found')
        return
      }

      const myChart = echarts.init(chartDom)
      
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}: {c}次'
        },
        series: [{
          type: 'wordCloud',
          shape: 'circle',
          left: 'center',
          top: 'center',
          width: '90%',
          height: '90%',
          right: null,
          bottom: null,
          sizeRange: [12, 60],
          rotationRange: [-45, 45],
          rotationStep: 45,
          gridSize: 8,
          drawOutOfBound: false,
          layoutAnimation: true,
          textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160) + 95,
                Math.round(Math.random() * 160) + 95,
                Math.round(Math.random() * 160) + 95
              ].join(',') + ')'
            }
          },
          emphasis: {
            focus: 'self',
            textStyle: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: [
            { value: 32, name: '物业费纠纷' },
            { value: 28, name: '邻里噪音' },
            { value: 15, name: '遗产继承' },
            { value: 12, name: '房屋租赁' },
            { value: 8, name: '婚姻家庭' },
            { value: 6, name: '装修纠纷' },
            { value: 5, name: '宠物管理' },
            { value: 4, name: '停车位争议' },
            { value: 3, name: '公共区域使用' },
            { value: 2, name: '电梯维修' }
          ]
        }]
      }

      myChart.setOption(option)

      // 监听窗口大小变化，重新调整图表大小
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    initAchievementChart() {
      const chartDom = this.$refs.achievementChart
      const myChart = echarts.init(chartDom)
      
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}%'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: {
            color: 'rgba(255, 255, 255, 0.7)'
          }
        },
        series: [
          {
            name: '矛盾纠纷',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['25%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#001324',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 40, name: '同比下降', itemStyle: { color: '#52c41a' } },
              { value: 60, name: '其他', itemStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
            ]
          },
          {
            name: '法律知识',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [89],
            barWidth: 30,
            itemStyle: {
              color: '#00c6ff',
              borderRadius: [4, 4, 0, 0]
            }
          },
          {
            name: '反诈宣传',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [95],
            barWidth: 30,
            itemStyle: {
              color: '#faad14',
              borderRadius: [4, 4, 0, 0]
            }
          }
        ],
        grid: [
          {
            left: '55%',
            top: '10%',
            width: '40%',
            height: '35%'
          },
          {
            left: '55%',
            top: '55%',
            width: '40%',
            height: '35%'
          }
        ],
        xAxis: [
          {
            gridIndex: 0,
            type: 'value',
            max: 100,
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.7)',
              formatter: '{value}%'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          {
            gridIndex: 1,
            type: 'value',
            max: 100,
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.7)',
              formatter: '{value}%'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            type: 'category',
            data: ['法律知识问卷正确率'],
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.7)'
            }
          },
          {
            gridIndex: 1,
            type: 'category',
            data: ['反诈宣传知晓率'],
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.7)'
            }
          }
        ]
      }

      myChart.setOption(option)

      // 监听窗口大小变化，重新调整图表大小
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped>
.stool-meeting-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 40px);
  width: 100%;
  padding: 20px;
  color: #fff;
  background: #001324;
  box-sizing: border-box;
  overflow: hidden;
}

.left-content, .center-content, .right-content {
  width: calc(100% / 3);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  padding-bottom: 20px;
  height: calc(100vh - 60px);
}

.stat-card {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-height: 200px;
}

.card-title {
  color: #fff;
  font-size: 16px;
  margin-bottom: 15px;
  position: relative;
  padding-left: 10px;
  flex-shrink: 0;
}

.card-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #00c6ff;
}

/* 左侧样式优化 */
.meeting-count {
  text-align: center;
  padding: 20px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.count-value {
  font-size: 42px;
  font-weight: bold;
  color: #00c6ff;
  text-shadow: 0 0 10px rgba(0, 198, 255, 0.3);
}

.count-label {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

.trend {
  font-size: 14px;
  margin-top: 8px;
}

.trend.up {
  color: #52c41a;
}

.participant-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.participant-item {
  text-align: center;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
}

.participant-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.participant-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.participant-value {
  color: #00c6ff;
  font-size: 20px;
  font-weight: bold;
  margin-top: 4px;
}

.topic-distribution {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 6px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.topic-label {
  width: 120px;
  color: rgba(255, 255, 255, 0.7);
}

.topic-value {
  width: 40px;
  color: #00c6ff;
  font-weight: bold;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 198, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.meeting-records {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.record-item {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
}

.record-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.record-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.record-date {
  color: #00c6ff;
  font-weight: bold;
}

.record-location {
  color: rgba(255, 255, 255, 0.7);
}

.record-content {
  margin-bottom: 12px;
}

.record-hosts {
  margin-bottom: 8px;
}

.host {
  color: rgba(255, 255, 255, 0.7);
}

.record-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-tag {
  padding: 4px 8px;
  background: rgba(0, 198, 255, 0.1);
  color: #00c6ff;
  border-radius: 4px;
  font-size: 12px;
}

.record-footer {
  display: flex;
  justify-content: flex-end;
}

.view-details-btn {
  padding: 6px 12px;
  background: rgba(0, 198, 255, 0.2);
  color: #00c6ff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.view-details-btn:hover {
  background: rgba(0, 198, 255, 0.3);
}

/* 中间样式优化 */
.problem-tracking {
  height: 280px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  padding: 10px;
  position: relative;
}

#problemGanttChart {
  width: 100%;
  height: 100%;
  min-height: 250px;
}

.pending-problems {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
  max-height: calc(100vh - 500px);
}

.problem-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
}

.problem-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
  min-height: 60px;
}

.problem-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.problem-id {
  color: #00c6ff;
  font-weight: bold;
  min-width: 80px;
}

.problem-type {
  flex: 1;
  color: rgba(255, 255, 255, 0.7);
  min-width: 100px;
}

.problem-reporter {
  color: rgba(255, 255, 255, 0.7);
  min-width: 60px;
}

.problem-priority {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  min-width: 40px;
  text-align: center;
}

.problem-priority.high {
  background: rgba(255, 77, 79, 0.2);
  color: #ff4d4f;
}

.problem-priority.medium {
  background: rgba(250, 173, 20, 0.2);
  color: #faad14;
}

.problem-priority.low {
  background: rgba(0, 198, 255, 0.2);
  color: #00c6ff;
}

.problem-actions {
  display: flex;
  gap: 8px;
  min-width: 120px;
}

.action-btn {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.action-btn.view {
  background: rgba(0, 198, 255, 0.2);
  color: #00c6ff;
}

.action-btn.handle {
  background: rgba(82, 196, 26, 0.2);
  color: #52c41a;
}

/* 右侧样式优化 */
.law-promotion {
  height: 200px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  padding: 15px;
}

.promotion-slider {
  height: 100%;
  overflow: hidden;
}

.promotion-item {
  padding: 16px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
}

.promotion-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.promotion-title {
  color: #00c6ff;
  font-weight: bold;
  margin-bottom: 8px;
}

.promotion-content {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.consultation-chart {
  width: 100%;
  height: 250px;
  margin-top: 10px;
}

.consultation-stats {
  height: 280px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  padding: 10px;
}

#consultationChart {
  width: 100%;
  height: 100%;
}

.achievement-chart {
  width: 100%;
  height: 250px;
  margin-top: 10px;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 198, 255, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 198, 255, 0.5);
}
</style> 